<template>
  <div class="Approval-box">
    <el-container>
      <el-aside width="400px">
        <div class="block">
          <el-link type="success" @click="ClickApproval">单据审批</el-link>
          <el-timeline>
            <el-timeline-item v-for="item in activities" :color="item.color" size="large " placement="top">
              <el-card>
                <div class="Approval-card">
                  <img src="https://img.shetu66.com/2023/07/18/1689659210837955.png" />
                  <div>
                    <h4>{{ item.dept }}-{{ item.name }}</h4>
                    <p>{{ item.timestamp }}-{{ item.state }}</p>
                  </div>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-aside>
      <el-container>
        <el-main>
          <FillPageV></FillPageV>
        </el-main>
      </el-container>
    </el-container>

    <!--弹出框 -->
    <el-dialog title="提交审批" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="100px">
        <el-form-item>
          <el-radio-group v-model="form.resource">
            <el-radio label="同意"></el-radio>
            <el-radio label="不同意"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审批意见">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FillPageV from '@/views/TaskDetails/FillPageV.vue'
export default {
  components: { FillPageV },
  data() {
    return {
      form: {
        resource: '同意'
      },
      dialogFormVisible: false,
      activities: [
        {
          dept: '提交',
          name: '赵XX',
          timestamp: '2025-04-24 20:46:05',
          color: 'rgb(39, 141, 202)',
          state: '发起'
        },

        {
          dept: '部门负责人',
          name: '钱XX',
          timestamp: '2025-05-07 15:47:33',
          color: 'rgb(231, 155, 39)',
          state: '同意'
        }
      ]
    }
  },
  methods: {
    ClickApproval() {
      this.dialogFormVisible = true
    }
  }
}
</script>

<style scoped>
.el-aside {
  background-color: #fdfbf2;
  margin-bottom: 0px;
}

.el-main {
  width: 100%;
  /* background-color: #b3c0d1; */
  color: #333;
  text-align: center;
  padding: 0px;
}
.el-timeline {
  padding: 0;
}

.Approval-box >>> .Approval-card {
  display: flex;
}
img {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  margin: auto;
  object-fit: cover;
}
.el-link {
  margin-bottom: 10px;
}
</style>
